
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>心灵影院</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js'
            charset='utf-8'></script>
    <link rel="stylesheet" href="/js/dropload/dist/dropload.css" >
    <script type='text/javascript' src='/js/dropload/dist/dropload.js' charset='utf-8'></script>

    <style type="text/css">
        /*loading-row-pull*/
        .section-row{padding:10px;}
        .section-row .row-item{border-bottom:1px solid #ddd;padding:8px 0 8px 90px;overflow:hidden;}
        .section-row .row-item .info{position: relative;height:80px;font-size:12px;}
        .section-row .row-item .thumb{float: left;width:80px;margin-left:-90px;}
        .section-row .row-item .img{width:100%;}
        .section-row .row-item .meta{margin-right:75px;}
        .section-row .row-item .name{padding-bottom:5px;font-size:16px;}
        .section-row .row-item .name,
        .section-row .row-item .intro{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
        .section-row .row-item .price{color:#f54d4f;}
        .section-row .row-item .price-original{margin-left:5px;font-size:12px;color:#bbb;}
        .section-row .row-item .action{position: absolute;right:0;top:50%;-webkit-transform:translate3d(0 , -50% , 0);transform:translate3d(0 , -50% , 0);}
        .section-row .row-item .btn-action{display:block;border:1px solid #f54d4f;border-radius:2px;padding:0 10px;line-height:24px;color:#f54d4f;background: #fff;}



        .loading{text-align: center;background: #fff;}
        .loading .loading-animation{position:relative;width:40px;display:inline-block;vertical-align:middle;margin-right:3px;}
        .loading-circle{position:relative;margin:0 auto;width:12px;height:12px;}
        .loading-circle .circle{position:absolute;top:0;width:12px;height:12px;content:'';border-radius:50%;}
        .loading-circle .circle01{background:#dd8000;left:15px;
            -webkit-animation:circleRotote03 1.5s linear infinite;
            animation:circleRotote03 1.5s linear infinite;}
        .loading-circle .circle02{left:0;z-index:10;background:#000;}

        @-webkit-keyframes circleRotote03{
            0%{ left:15px;z-index:11;}
            49%{ z-index:11;}
            50%{ left:-15px;z-index:5;}
            100%{ z-index:5;}
        }
        @keyframes circleRotote03{
            0%{ left:15px;z-index:11;}
            49%{ z-index:11;}
            50%{ left:-15px;z-index:5;}
            100%{ z-index:5;}
        }

        .loading-animation .arrow{font-weight:bolder;font-size:22px;display:none;
            -webkit-transition:0.5s all;transition:0.5s all;
            -webkit-transform:rotate(0deg);transform:rotate(0deg);
        }
        .loading .loading-animation .arrow,
        .loading .loading-text .text02,
        .loading .loading-text .text03{display:none;}

        .loading-drag-move .loading-animation .loading-circle,
        .loading-drag-move .loading-text .text01,
        .loading-drag-move .loading-text .text03{display:none;}

        .loading-drag-move .loading-animation .arrow{
            -webkit-transform:rotate(0deg);transform:rotate(0deg);
        }
        .loading-drag-move .loading-animation .arrow,
        .loading-drag-move .loading-text .text02{display:inline-block;}

        .loading-drag-trigger .loading-animation .loading-circle,
        .loading-drag-trigger .loading-text .text01,
        .loading-drag-trigger .loading-text .text02{display:none;}

        .loading-drag-trigger .loading-animation .arrow{
            -webkit-transform:rotate(180deg);transform:rotate(180deg);
        }
        .loading-drag-trigger .loading-animation .arrow,
        .loading-drag-trigger .loading-text .text03{display:inline-block;}


        /*a:link {*/
        /*text-decoration: none;*/
        /*}*/
        /*a:visited {*/
        /*text-decoration: none;*/
        /*}*/
        a {
            color: #008C9E;
        }
        a:hover {
            text-decoration: none;  color:#FFAA33;
        }
        tab-item:active {
            color: #FFAA33;
        }
        .button-color {color:#ffffff !important;}
        .row{
            background-color: #1a1a1a;
        }
        .bar-nav~.content {
            top: 0rem;
        }

        .list-block.media-list .item-inner {
            padding-top: .2rem;
            padding-bottom: .0rem;
        }

        .list-block .item-inner:after {
            height: 0px;
        }
        .bar .button-link{
            color: #ffffff;
        }

        .page.theme-dark, .panel.theme-dark, .theme-dark .content, .theme-dark .login-screen-content, .theme-dark .page, .theme-dark .panel {
            background-color: #181b20;
            color: #ddd;
        }
        #category-head{width:100%;display: inline;white-space: nowrap;overflow-x:scroll;float:left;overflow-y:hidden;font-size: .8rem;color: #008C9E;}
        #category-head li{display:inline-block;width:2.5rem;height:.8rem;padding-left:10px;}
        ul {
            -webkit-padding-start: 0px;
            margin: 0;
            padding-top: .5rem;
        }
        .movieImg2{
            float: left;
            margin: 0 1%;
            width: 31%;
        }
        .movieName{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align : left;
            -webkit-line-clamp:1;
            padding-left: .05rem;
            font-size: .85rem;
            color: #ffffff;
        }
        .movieExplain{
            color: #008C9E;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp:1;
            font-size: .7rem;
            padding-left: .05rem;
            color: #4d5b72;
        }

        .content ul{
            margin-top: 3rem;
        }
        li .row{
            margin-left: .1rem;
        }
        .infinite-scroll-preloader {
            margin-top:-20px;
        }
    </style>


</head>
<body class="theme-dark">
<div class="page">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left back" href="/demos" >
            <span class="icon icon-left"></span>
        </a>
        <h1 class="title">喜欢的类型</h1>

        <div class="bar bar-header-secondary">
            <ul class="flex-layout category-head" id="category-head" style="" >
                <!--<li class="flex sp_1"  id="brand_cat" searchtype="brand"><a href="#">喜剧</a></li>-->
                <!--<li class="flex sp_2"  ><a href="#">悬疑</a></li>-->
                <!--<li class="flex sp_3"  ><a href="#">爱情</a></li>-->
                <!--<li class="flex sp_4"  ><a href="#">剧情</a></li>-->
                <!--<li class="flex sp_5"  ><a href="#">奇幻</a></li>-->
                <!--<li class="flex sp_6"  ><a href="#">犯罪</a></li>-->
                <!--<li class="flex sp_7"  ><a href="#">传记</a></li>-->
                <!--<li class="flex sp_8"  ><a href="#">歌舞</a></li>-->
                <!--<li class="flex sp_9"  ><a href="#">古装</a></li>-->
                <!--<li class="flex sp_10"  ><a href="#">伦理</a></li>-->
                <!--<li class="flex sp1_1"  ><a href="#">科幻</a></li>-->
                <!--<li class="flex sp1_2"  ><a href="#">动作</a></li>-->
                <!--<li class="flex sp1_3"  ><a href="#">恐怖</a></li>-->
                <!--<li class="flex sp1_4"  ><a href="#">惊悚</a></li>-->
                <!--<li class="flex sp1_5"  ><a href="#">战争</a></li>-->
                <!--<li class="flex sp1_6"  ><a href="#">记录</a></li>-->
                <!--<li class="flex sp1_7"  ><a href="#">动画</a></li>-->
                <!--<li class="flex sp1_8"  ><a href="#">历史</a></li>-->
                <!--<li class="flex sp1_9"  ><a href="#">文艺</a></li>-->

            </ul>

        </div>
    </header>

    <div class="content" id="content">

        <!-- 这里是页面内容区 -->
        <div class="list-t-wrap">
            <div id="refreshContainer" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="list-wrapper">
                        <ul>
                            <li class="item-content"  id="ul_comment">

                            </li>
                        </ul>
                        <div id="div_commentfoot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



</body>
<script type='text/javascript' src='/js/mortise/comm.js' charset='utf-8'></script>

<script type="text/javascript">




    Zepto(function($) {
        var paramstypeid=$.getUrlParam('typeid');
        LoadUrlTitle();
        if (paramstypeid){
            ClickType(paramstypeid);
        }
        else{
            ClickType('');
        }
        //加载 li

    });
    function  LoadUrlTitle() {
        //设置所有ul


        var
            html='<li class="flex"    onclick="ClickType(\'\')"  ><a id="li_type_" href="#">全部</a></li>';
        $.each(VideoTypeData,function (index,item) {
            html+=' <li class="flex"    onclick="ClickType('+item.id+')"><a id="li_type_'+item.id+'" href="#">'+item.name+'</a></li>'
        });
        $('#category-head').html(html);
    }

    var filmObject = {
        pno: 1,
        pagesize: 6,
        allcount: -1,
        filmtype:''
    }

    //点击分类
    function ClickType(typeid){
        $('a[id^="li_type_"]').css('color','');
        $('#li_type_'+typeid).css('color','#FFAA33');
        var typeIdStr='';
        if (typeof (typeid)!='undefined'&& typeid!==''){
            //循环一次
            for(var i=0;i<19;i++){
                if (i==typeid){
                    typeIdStr+='1';
                }
                else{
                    typeIdStr+='_';
                }
            }
        }
        filmObject.filmtype=typeIdStr;
        filmObject.pno=1;
        LoadVideoList();

    }

    function getHtml(  item) {
        return  '<div class="movieImg2" style="cursor:pointer" onclick="GoToVideoInfo(\''+item.fId+'\')">'+
            '<img src="'+item.fPhoto+'"alt="" style="width: 100%" />'+
            '   <span class="movieName">'+
            item.fName+
            '   </span>'+
            '   <span class="movieExplain">'+item.fKeyword+'</span>'+
            '</div>'
    }
    //加载视频
    function LoadVideoList() {

        $('#div_commentfoot').html('');

        $.ajax({
            type: 'get',
            url:
            '/api/film/getfilmlist?name=&filmtype='+filmObject.filmtype+'&pno='+filmObject.pno+'&pagesize=' +
            ''+filmObject.pagesize+'&allcount=-1',
            dataType: 'json',
            success: function(data){
                if (mortise_layout.ValidataResult(data)) {
                    //{"code":"OperateOk","errorMsg":"","result":{"list":[{"fId":"594cabc05bc42d07a0aa541a","fName":"一个钓鱼的故事","fFilmtype":"1000010100000000000","fYear":2016,"fCountry":12,"fKeyword":"一个钓鱼的故事","fPhoto":"http://119.10.70.142:9080/Images/upload/videoPhoto/595a87fe37ca1d108069af15.png","fPhotow":"http://101.201.122.79:8083/Images/upload/videoPhoto/596adca774c36b070e69ec8e.jpg","fDirector":"Matt Birman","fPerformer":"Eddie McClintock, Jayne Heitmeyer, Jordyn Negri ","fShowtime":"2016-12-12","fScore":0.0,"fPricetagid":"0","fPricetagname":"免费电影","fIntime":"2017-06-23 14:20:23","fShow":1,"fLookct":0,"fMakelookct":11,"fGoodct":0,"fMakegoodct":12,"fCollect":2,"fMakecollect":13,"fPlayct":132,"fMakepalyct":15,"fSharect":0,"fMakesharect":null,"fBuyct":0,"fCommentct":22,"fSourceurl":null,"fCountryname":"加拿大","fFilmtypename":"喜剧/剧情/奇幻","fImpression":"印象"},{"fId":"5930e4cd1c886e2dc0d45342","fName":"末世迷踪：下一代","fFilmtype":"0000000100000000000","fYear":2016,"fCountry":4,"fKeyword":"末世迷踪：下一代","fPhoto":"http://119.10.70.142:9080/Images/upload/videoPhoto/595a88f137ca1d108069af17.png","fPhotow":"http://101.201.122.79:8083/Images/upload/videoPhoto/596adcc774c36b070e69ec90.jpg","fDirector":"Larry A. McLean","fPerformer":" Amber Frank, Mason Dye, Dylan Sprayberry","fShowtime":"2017-06-02","fScore":0.0,"fPricetagid":"0","fPricetagname":"免费电影","fIntime":"2017-06-02 12:08:34","fShow":1,"fLookct":1,"fMakelookct":15,"fGoodct":2,"fMakegoodct":25,"fCollect":2,"fMakecollect":0,"fPlayct":17,"fMakepalyct":5,"fSharect":1,"fMakesharect":null,"fBuyct":0,"fCommentct":4,"fSourceurl":null,"fCountryname":"美国","fFilmtypename":"奇幻","fImpression":null},{"fId":"594c95065bc42d07a03f1fac","fName":"大婴儿","fFilmtype":"1100010000000000000","fYear":2015,"fCountry":4,"fKeyword":"大婴儿","fPhoto":"http://119.10.70.142:9080/Images/upload/videoPhoto/595a887337ca1d108069af16.png","fPhotow":"http://101.201.122.79:8083/Images/upload/videoPhoto/596adcb874c36b070e69ec8f.jpg","fDirector":"Stephen Langford","fPerformer":"Maureen McCormick, Andrew Lawrence, Ken Davitian","fShowtime":"2015-12-12","fScore":0.0,"fPricetagid":"1","fPricetagname":"2元电影","fIntime":"2017-06-23 12:43:35","fShow":1,"fLookct":0,"fMakelookct":11,"fGoodct":0,"fMakegoodct":12,"fCollect":1,"fMakecollect":13,"fPlayct":11,"fMakepalyct":15,"fSharect":0,"fMakesharect":null,"fBuyct":0,"fCommentct":4,"fSourceurl":null,"fCountryname":"美国","fFilmtypename":"喜剧/爱情/剧情","fImpression":"印象"},{"fId":"594cacc75bc42d07a0aa541b","fName":"正义","fFilmtype":"1100000000000000000","fYear":2016,"fCountry":4,"fKeyword":"正义","fPhoto":"http://119.10.70.142:9080/Images/upload/videoPhoto/595a87a137ca1d108069af14.png","fPhotow":"http://101.201.122.79:8083/Images/upload/videoPhoto/596adc9d74c36b070e69ec8d.jpg","fDirector":"Richard Gabai","fPerformer":" Stephen Lang, Jackson Rathbone, Jamie-Lynn Sigler ","fShowtime":"2016-12-12","fScore":0.0,"fPricetagid":"0","fPricetagname":"免费电影","fIntime":"2017-06-23 14:24:45","fShow":1,"fLookct":0,"fMakelookct":11,"fGoodct":0,"fMakegoodct":12,"fCollect":0,"fMakecollect":13,"fPlayct":4,"fMakepalyct":15,"fSharect":0,"fMakesharect":null,"fBuyct":0,"fCommentct":0,"fSourceurl":null,"fCountryname":"美国","fFilmtypename":"喜剧/爱情","fImpression":"印象"}]},"allcount":0}

                    var videoList = data.result.list;
                    var dataCount=data.result.count;
                    filmObject.allcount=dataCount;
                    $('#sp_commentct').html(dataCount);
                    if (videoList && videoList.length > 0) {
                        var _html = '';
                        for (var i=0;i<videoList.length;i+=3){
                            _html+='<div class="row">';
                            _html += getHtml(videoList[i]);
                            if (i+1<videoList.length ){
                                _html += getHtml(videoList[i+1]);
                            }
                            if (i+2<videoList.length ){
                                _html += getHtml(videoList[i+2]);
                            }
                            _html+='</div>';
                            _html+='</div>';
                        }
                        if(filmObject.pno==1){
                            $('#ul_comment').html(_html);
                        }
                        else{
                            $('#ul_comment').append(_html);
                        }

                        if (dataCount>( filmObject.pno)* filmObject.pagesize){
                            filmObject.pno++;
                            $('#div_commentfoot').html('<span style="cursor:pointer" onclick="loadMore()">查看更多...</span>');
                        }
                        else{
                            //over
                            $('#div_commentfoot').html('<span style="cursor:pointer">没有数据了...</span>');
                        }
                        //$.detachInfiniteScroll($('.infinite-scroll'));
                        // 删除加载提示符
//                        $('.infinite-scroll-preloader').remove();
//                        $.refreshScroller();


                    }
                    else{
                        $('#ul_comment').html('没有数据了！');
                    }

                }

            }
        });
    }
    function loadMore() {
        filmObject.pno++;
        LoadVideoList();
    }
</script>
</html>